<!--
* @Description: 查询组件
* @Version: 1.0.0
-->
<template>
  <el-form :inline="true" :model="form" style="width: 100%">
    <el-row>
      <el-col :sm="12" :md="8" :lg="6" v-for="(item, index) in formItems.slice(0, conditionFold ? showItemLength : formItems.length)" :key="index">
        <el-form-item :label="item.label + '：'" :prop="`[${index}]value`">
          <!-- 输入框 -->
          <template v-if="item.type == 'input'">
            <el-input v-model="form[item.field]" :placeholder="item.placeholder || '请输入' + item.label" @keyup.enter="onEnterKey" clearable></el-input>
          </template>
          <!-- 选择框 -->
          <template v-else-if="item.type == 'select'">
            <el-select :style="{ width: '100%' }" v-model="form[item.field]" :placeholder="item.placeholder || '请选择' + item.label" :multiple="item.selectMultiple" clearable>
              <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value" />
            </el-select>
          </template>
          <!-- 日期选择器-->
          <template v-if="item.type == 'date'">
            <el-date-picker v-model="form[item.field]" :placeholder="item.placeholder || '请选择' + item.label" :type="item.dateType" :value-format="item.dateFormat || 'YYYY-MM-DD'" :shortcuts="item.dateShortcuts" :disabled-date="item.dateDisabled" :default-value="item.dateDefaultValue" :default-Time="item.dateDefaultTime" />
          </template>
        </el-form-item>
      </el-col>
      <el-col :sm="12" :md="8" :lg="6">
        <el-form-item>
          <el-button type="primary" icon="Search" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
          <el-button v-if="formItems.length > showItemLength" type="primary" link @click="areConditionFold">
            {{ conditionFold ? "展开" : "收起" }}
            <el-icon v-if="conditionFold">
              <ArrowDown />
            </el-icon>
            <el-icon v-else>
              <ArrowUp />
            </el-icon>
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import { ElInput } from "element-plus";

// const props = defineProps({
//     // 查询组件类型,输入框/下拉选择器/日期选择器/日期范围选择器 "input" | "select" | "date"
//     type: {
//         type: String,
//         default: 'query',
//     },
//     // 字段名称
//     label: {
//         type: String,
//         default: 'query',
//     },
//     // 字段
//     field: {
//         type: String
//     },
//     // 占位符
//     placeholder: {
//         type: String
//     },
//     // select数据，仅type=select有效
//     options: {
//         type: Array
//     },
//     //  是否多选 select是否多选，仅type=select有效
//     selectMultiple: {
//         type: Boolean,
//         default: false
//     },
//     // 日期选择器类型，'year' | 'years' |'month' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange'
//     dateType: {
//         type: String
//     },
//     // 日期格式，"YYYY-MM-DD hh:mm:ss"这种，默认"YYYY-MM-DD"
//     dateFormat: {
//         type: String
//     },
//     // 日期快捷选项。
//     dateShortcuts: {
//         type: Array,
//         default: () => []
//     },
//     dateDisabled:{
//         type: Function
//     },
//     // 日期默认值，new Date()类型
//     dateDefaultValue:{
//         type:Date
//     },
//     // 显示日期默认时间，new Date()类型
//     dateDefaultTime:{
//         type: Date
//     }
// });

const props = defineProps({
  // 表单选项
  formItems: {
    type: Object,
  },
  // 显示数量
  showItemLength: {
    type: Number,
    default: 3,
  },
});

const emit = defineEmits(["search", "reset", "enterKey"]);
const conditionFold = ref(true);
const form = ref({});

props.formItems.forEach((item) => {
  form.value[item.field] = "";
});

/**
 * @description 搜索
 */
const search = () => {
  emit("search", form.value);
};

/**
 * @description 重置
 */
const reset = () => {
  props.formItems.forEach((item) => {
    form.value[item.field] = "";
  });
  emit("reset");
};

/**
 * @description 回车键搜索
 */
const onEnterKey = () => {
  emit("enterKey", form.value);
};

/**
 * @description 切换搜索条件
 */
const areConditionFold = () => {
  conditionFold.value = !conditionFold.value;
};
</script>

<style scoped>
.el-form-item {
  display: flex;
}
</style>
